<template>
    <transition name="move">
        <div class="mineCollect" v-show="mineCollectFlag">
            <m-title :title="title" :returnShow="returnShow" @clickHide="hide"></m-title>
            <scroll class="mine-collect-container" :data="trainList">
                <div>
                    <ul class="mine-collect-item">
                        <router-link :to="'trainText/'+ item.trainid" tag="li" class="mine-collect-list" v-for="(item, index) in trainList" :key="index">
                            <div class="left">
                                <img class="img" :src="item.coverimg" alt="" />
                            </div>
                            <div class="middle">
                                <div class="train-list-title">{{item.trainname}}</div>
                                <div class="start-wrapper">
                                    <div class="start-time">
                                        <span class="start-date">{{item.startdate}}</span>
                                        <span class="start-hour">{{item.starttime}}</span>
                                    </div>
                                    <div class="train-people">
                                        <span class="name">辅导老师：</span>
                                        <span class="text">{{item.teacher}}</span>
                                    </div>
                                    <div class="train-number">
                                        <span class="text">预约人数：</span>
                                        <span class="end-hour">
                                            <b class="num">{{item.signnum}}</b> /
                                            {{item.totalnum}}人
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <!-- @click.stop="trainDetailShow(item.trainid)" -->
                            <div class="right">
                                <span tag="span" class="train-order" v-if="item.status==='1'">已预约</span>
                                <span tag="span" class="train-order" v-if="item.status==='2'">已拒绝</span>
                                <span tag="span" class="train-order" v-if="item.status==='-1'">待审核</span>
                            </div>
                        </router-link>
                    </ul>
                </div>
            </scroll>
            <!-- 暂无收藏信息 -->
            <div class="mine-collect-none" v-show="trainList === null">
                <a href="javascript:;" class="mine-collect-none-btn"></a>
            </div>
            <!-- <train-detail ref="trainDetailFlag" :DetailList="DetailList"></train-detail> -->
        </div>
    </transition>
</template>

<script>
    import axios from 'axios'
    import MTitle from 'base/title/title'
    import Scroll from 'base/scroll/scroll'
    import Loading from 'base/loading/loading'
    import TrainDetail from 'pages/train/components/train-detail/trainDetail'
    export default {
        data () {
            return {
                returnShow: true,
                mineCollectFlag: false,
                title: '我的培训',
                trainList: [],
                DetailList: {}
            }
        },
        methods: {
            show () {
                this.mineCollectFlag = true
            },
            hide () {
                this.mineCollectFlag = false
            },
            // 根据点击的id进行数据请求
            trainDetailShow (id) {
                this.$refs.trainDetailFlag.show()
                axios.get('./static/trainDetail.json', {
                    params: {
                        id: id
                    }
                }).then((res) => {
                    res = res.data.data
                    this.DetailList = res.trainDetailList[0]
                })
            },
            getTrainInfo () {
                axios.post('/api/index.php?g=Api&m=Ucenter&a=mytrains', {
                    openid: localStorage.getItem("openid"),
                    mid: localStorage.getItem("memberid")
                }).then((res) => {
                    // 请求成功
                    if (res.data.rescode === "0000") {
                        this.trainList = res.data.data
                    }
                }).catch(function (error) {
                    // 请求失败
                })
            }
        },
        components: {MTitle,Loading,Scroll,TrainDetail},
        created() {
            this.getTrainInfo()
        }
    }
</script>

<style lang="stylus" scoped>
    @import '~common/stylus/mixins.styl'
    .mineCollect
        position: fixed
        top: 0
        left: 0
        width: 100%
        height: 100%
        overflow: hidden
        background: #fff
        padding-top: 10px
        box-sizing: border-box
        transition: all .2s linear
        &.move-enter,&.move-leave-to
            transform: translate3d(100%,0,0)
        .mine-collect-none
            position: absolute
            width: 100%
            top: 50%
            transform: translateY(-50%)
            z-index: 9
            .mine-collect-none-btn
                background: url('./icon3.png') no-repeat
                width: 191px
                height: 36px
                background-size: 100% 100%
                display: block
                margin: 0 auto
        .mine-collect-container
            position: absolute
            top: 44px
            width: 100%
            padding: 0 15px
            box-sizing: border-box
            bottom: 0
            overflow: hidden
            .loading-wrapper
                position: absolute
                width: 100%
                top: 50%
                -webkit-transform: translateY(-50%)
                transform: translateY(-50%)
                z-index: 9
            .mine-collect-item
                width: 100%
                .mine-collect-list
                    width: 100%
                    height: 100px
                    border-bottom: 1px solid #eee
                    box-sizing: border-box
                    display: flex
                    align-items: center
                    overflow: hidden
                    position: relative
                    .left
                        flex: 0 0 100px
                        width: 100px
                        margin-right: 10px
                        .img
                            width: 100px
                    .middle
                        flex: 1
                        ellipsis()
                        .train-list-title
                            width: 100%
                            font-size: 14px
                            ellipsis()
                        .start-wrapper
                            margin-top: 6px
                            .start-time,.train-people
                                font-size: 0
                                margin-top: 4px
                                .start-date,.name
                                    font-size: 14px
                                    color: #888
                                .start-hour,.text
                                    font-size: 14px
                                    color: #888
                                    margin-left: 10px
                            .train-people
                                .text
                                    margin-left: 0px
                            .train-number
                                margin-top: 4px
                                .text
                                    font-size: 14px
                                    color: #888
                                .end-hour
                                    font-size: 14px
                                    color: #888
                                    .num
                                        color: #d40000
                    .right
                        position: absolute
                        right: 0
                        top: 38px
                        .train-order
                            width: 66px
                            height: 24px
                            background: #0094d4
                            border-radius: 20px
                            color: #fff
                            display: block
                            text-align: center
                            line-height: 24px
                            font-size: 14px
</style>